<!DOCTYPE html>
<html lang="en">
<#include "/element-ui-tpls/head.html"/>
<body>
<div id="app" v-cloak>
    <el-container style="height: 100%; border: 1px solid #eee;">
        <#include "/element-ui-tpls/aside.html"/>
        <el-main>
            <span>>> 服务器</span><hr>
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters">
                    <el-form-item>
                        <el-input v-model="filters.name" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-table :data="tableData" border style="width: 100%; margin-top: 10px;" class="tableLimit">
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="ip" label="IP" :width="160"></el-table-column>
                <el-table-column prop="port" label="端口"></el-table-column>
                <el-table-column prop="env" label="环境"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="info" label="配置" :width="200"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" :width="160"></el-table-column>
                <el-table-column label="管理" :width="300">
                    <template slot-scope="scope">
                        <el-button size="mini" type="info" @click="handleUser(scope.row)">用户</el-button>
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="doDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;">
                <el-pagination background layout="prev, pager, next"
                               :total="total" :page-size="pageSize" @current-change="changePage">
                </el-pagination>
            </div>

            <el-dialog title="编辑" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
                <el-form :model="form" ref="form" label-width="80px">
                    <el-form-item label="名称">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="IP">
                        <el-input v-model="form.ip" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="端口">
                        <el-input v-model="form.port" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="环境">
                        <el-select v-model="form.env" placeholder="请选择" style="width: 100%">
                            <el-option
                                    v-for="item in envOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-select v-model="form.type" placeholder="请选择" style="width: 100%">
                            <el-option
                                    v-for="item in typeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="配置">
                        <el-input v-model="form.info" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="doSave">保存</el-button>
                </div>
            </el-dialog>
            <el-dialog title="管理用户" :visible.sync="userDialogVisible" :close-on-click-modal="false">
                <el-row>
                    <el-col :span="24">
                        <el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>
                            <el-table-column v-for="(v,i) in master_user.columns" :prop="v.field" :label="v.title">
                                <template slot-scope="scope">
                                    <el-input size="mini" v-model="master_user.sel[v.field]" v-if="scope.row.isSet"></el-input>
                                    <span v-else>{{scope.row[v.field]}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100">
                                <template slot-scope="scope">
                                    <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;"
                                          @click="editMasterUser(scope.row, scope.$index, false)">
                                        {{scope.row.isSet?'保存':"修改"}}
                                    </span>
                                    <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;"
                                          @click="deleteMasterUser(scope.row, scope.$index)">
                                        删除
                                    </span>
                                    <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;"
                                          @click="editMasterUser(scope.row, scope.$index, true)">
                                        取消
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="24">
                        <div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
                    </el-col>
                </el-row>
            </el-dialog>
        </el-main>
    </el-container>
</div>

<#include "/element-ui-tpls/script.html"/>
<script>
    new Vue({
        el: '#app',
        data: {
            dialogFormVisible: false,
            tableData: [],
            total: 0,
            pageSize: __PAGE_SIZE,
            apis: {
                rest: '/bpi/servers',
                user: '/bpi/server-users'
            },
            filters: {
                name: null,
            },
            form: {
            },
            envOptions: [{
                value: 'dev',
                label: '测试'
            }, {
                value: 'prod',
                label: '生产'
            }],
            typeOptions: [{
                value: 'Linux',
                label: 'Linux'
            }, {
                value: 'Window',
                label: 'Window'
            }],
            // 用户
            userDialogVisible: false,
            currServerId: 1,
            master_user: {
                sel: null,//选中行
                columns: [
                    { field: "account", title: "账号"},
                    { field: "pwd", title: "密码"},
                    { field: "memo", title: "描述"},
                ],
                data: [],
            },
        },
        methods: {
            handleUser: function(row) {
                var vm = this;
                var serverId = row.id;
                axios.get(this.apis.user, {
                    params: {serverId: serverId}
                }).then(function (data) {
                    vm.currServerId = serverId;
                    vm.userDialogVisible = true;
                    vm.master_user.data = data;
                });
            },
            //添加账号
            addMasterUser() {
                var app = this;
                for (let i of app.master_user.data) {
                    if (i.isSet) return app.$message.warning("请先保存当前编辑项");
                }
                let j = {"key": G.tid.get(), "account": "", "pwd": "", "memo": "", "isSet": true, "_temporary": true};
                j.serverId = app.currServerId;
                app.master_user.data.push(j);
                app.master_user.sel = Object.assign({}, j);
            },
            //修改
            editMasterUser(row, index, isCancel) {
                var app = this;
                //点击修改 判断是否已经保存所有操作
                for (let i of app.master_user.data) {
                    if (i.isSet && i.id !== row.id) {
                        app.$message.warning("请先保存当前编辑项");
                        return false;
                    }
                }
                //是否是取消操作
                if (isCancel) {
                    row.isSet = false;
                    var selData = app.master_user.sel;
                    if (!selData.id) {
                        app.master_user.data.splice(index, 1);
                    } else {
                        row.isSet = false;
                        app.master_user.data.splice(index, 1, row);
                    }
                    return;
                }
                //提交数据
                if (row.isSet) {
                    let data = Object.assign({}, app.master_user.sel);
                    axios.post(app.apis.user, data)
                        .then(function (data) {
                            var rawData = app.master_user.data;
                            rawData.splice(index, 1, Object.assign(row, data));
                            row.isSet = false;
                        });
                } else {
                    app.master_user.sel = Object.assign({}, row);
                    row.isSet = true;
                    app.master_user.data.splice(index, 1, row);
                }
            },
            deleteMasterUser: function(row, index) {
                var vm = this;
                var id = row.id;
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(function() {
                    var url = vm.apis.user +"/" + id;
                    axios.delete(url)
                        .then(function (data) {
                            var rawData = vm.master_user.data;
                            rawData.splice(index, 1);
                        })
                }).catch(function() {});
            },
            // =====分割线=====
            handleAdd: function() {
                this.form = {};
                this.dialogFormVisible = true;
            },
            handleEdit: function(row) {
                this.form = Object.assign({}, row);
                this.dialogFormVisible = true;
            },
            doSave: function() {
                var vm = this;
                this.$refs['form'].validate(function(valid) {
                    if (valid) {
                        axios.post(vm.apis.rest, vm.form)
                            .then(function (data) {
                                vm.dialogFormVisible = false;
                                vm.doQuery();
                            });
                    } else {
                        return false;
                    }
                });
            },
            doDelete: function(id) {
                var vm = this;
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(function() {
                    var url = vm.apis.rest +"/" + id;
                    axios.delete(url)
                        .then(function (data) {
                            vm.doQuery();
                        })
                }).catch(function() {});
            },
            handleSearch: function() {
                this.doQuery();
            },
            changePage: function(currPage) {
                this.doQuery(currPage);
            },
            doQuery: function(page) {
                var vm = this;
                var params =  Object.assign({page: page ? page : 1, size: vm.pageSize}, vm.filters);
                axios.get(this.apis.rest, {
                    params: params
                }).then(function (data) {
                    vm.tableData = data.content;
                    vm.total = data.totalElements;
                });
            }
        },
        mounted: function() {
            this.doQuery();
        }
    });
</script>
</body>
</html>